<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0; display: flex; flex-direction: column">
  <div id="error-message" style="width: 100%; height: 5%; background-color: rgb(32, 32, 32); color: red; text-align: center; padding: 20px;"></div>
  <div id="chart container" style="width: 100%; height:80%;">
    <div id="container1" style="width: 100%; height: 50%;"></div>
    <div id="container2" style="width: 100%; height: 50%;"></div>
  </div>
  <script src="js/jQuery.js"></script>
  <script type="text/javascript" src="js/echarts.js"></script>

  <script type="text/javascript">
    var dom1 = document.getElementById('container1');
    var dom2 = document.getElementById('container2');
    var myChart1 = echarts.init(dom1, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var myChart2 = echarts.init(dom2, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });

    var option1;
    var option2;
    var data_rec1;
    var data_rec2;
    var time_rec1;
    var time_rec2;
    var machine_error = document.getElementById('error-message');
    $.ajax({
      url: 'http://39.105.164.193:8080/data/',
      type: 'POST',
      dataType: 'json',
      data: {
          con_rec: 'consume',
          gen_rec: 'generate',
          time_rec: 'time'
      },
      success: function(data) {
          data_rec1 = data.consume;
          time_rec1 = data.time;
          data_rec2 = data.generate;
          time_rec2 = data.time;
          machine_error.textContent = data.error;
          if (data.error.length == 0) {
            machine_error.style.display = 'none'
          }
          option1 = {
            title: {
              text: 'Electricity Consumption',
              subtext: 'Not real data'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: time_rec1
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} kW'
              },
              axisPointer: {
                snap: true
              }
            },
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: 7,
                  color: 'green'
                },
                {
                  gt: 7,
                  lte: 10,
                  color: 'red'
                },
                {
                  gt: 10,
                  lte: 17,
                  color: 'green'
                },
                {
                  gt: 17,
                  lte: 21,
                  color: 'red'
                },
                {
                  gt: 17,
                  color: 'green'
                }
              ]
            },
            series: [
              {
                name: 'Electricity',
                type: 'line',
                smooth: true,
                data: data_rec1,
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: 'Morning Peak',
                        xAxis: '07:00'
                      },
                      {
                        xAxis: '10:00'
                      }
                    ],
                    [
                      {
                        name: 'Evening Peak',
                        xAxis: '17:00'
                      },
                      {
                        xAxis: '21:00'
                      }
                    ]
                  ]
                }
              }
            ]
          };

          option2 = {
            title: {
              text: 'Electricity Generation',
              subtext: 'Not real data'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: time_rec2
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} kW'
              },
              axisPointer: {
                snap: true
              }
            },
            visualMap: {
              show: false,
              dimension: 0,
              pieces: [
                {
                  lte: 7,
                  color: 'green'
                },
                {
                  gt: 7,
                  lte: 10,
                  color: 'red'
                },
                {
                  gt: 10,
                  lte: 17,
                  color: 'green'
                },
                {
                  gt: 17,
                  lte: 21,
                  color: 'red'
                },
                {
                  gt: 17,
                  color: 'green'
                }
              ]
            },
            series: [
              {
                name: 'Electricity',
                type: 'line',
                smooth: true,
                data: data_rec2,
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: [
                    [
                      {
                        name: 'Morning Peak',
                        xAxis: '07:00'
                      },
                      {
                        xAxis: '10:00'
                      }
                    ],
                    [
                      {
                        name: 'Evening Peak',
                        xAxis: '17:00'
                      },
                      {
                        xAxis: '21:00'
                      }
                    ]
                  ]
                }
              }
            ]
          };

          if (option1 && typeof option1 === 'object') {
            myChart1.setOption(option1);
          }
          if (option2 && typeof option2 === 'object') {
            myChart2.setOption(option2);
          }
      },
      error: function(xhr, status, error) {
          console.log('Error: ' + error);
      }
    });

    window.addEventListener('resize', function() {
      myChart1.resize();
      myChart2.resize();
    }); 
  </script>
</body>
</html>
